<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>产品名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="产品名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/product/code/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="id"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="skuName"
                    label="sku名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    min-width="40"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="productCodeStatus[scope.row.status]"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdByName"
                    label="创建者"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="创建时间"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="modifyByName"
                    label="最后操作者"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="modifyTime"
                    label="最后操作时间"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">

                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/product/code/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import {execCall, TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import {treeList2Tree} from "@/utils";

export default {
    name: "Code",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            examType: null,
            industryData: [],
            examData: [],
            categoryData: [],
            columnData: [],
            columnDataIds: [],
            industryFlag: false,
            examFlag: false,
            columnFlag: false,
            dataFormExamFlag: false,
            dataFormExamData: [],
            categoryFlag: false,
            queryData: {
                base: true,
                name: "",
                industryId: null,
                examId: null,
            },
            categoryProps: {
                checkStrictly: true,
                emitPath: false,
                label: "name",
                value: "id",
            },

            initAddForm: {
                id: null,
                name: null,
                price: null,
                agentPrice: null,
                sort: 100,
                industryId: null,
                examId: null,
                categoryId: null,
                columnIds: [],
                days: null,
                endDate: null,
                examType: "zhiye"
            },
        };
    },
    computed: {
        ...mapState({
            productCodeStatus: state => state.status.productCodeStatus,
        })
    },
    watch: {
    },
    created() {
    },
    mounted() {
    },
    methods: {
        search() {
            this.loadTable("/exam/product/code/page");
        },
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
    }
};
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel {
    width: 300px;
}
</style>
